// 右侧固定导航
import { useState } from 'react'
import './Right_fixed.css'
// 引入移入移出显示效果
import PopupImage from '../../public/Rnav';

import { Link } from 'react-router-dom';
function Rightnav() {
    // isHovered：布尔值，表示某个元素是否被鼠标悬停。初始值为 false，表示默认状态下没有悬停
    const [isHovered, setIsHovered] = useState(false);
    const [isHovered1, setIsHovered1] = useState(false);
    const [isHovered2, setIsHovered2] = useState(false);
    const [isHovered3, setIsHovered3] = useState(false);


    // 定义一个函数，用于平滑滚动到页面顶部
    const scrollToTop = () => {
        // 使用 Web API 的 scrollTo 方法实现平滑滚动效果
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };


    return (
        <div className='right_nav'>

            <div style={{ marginTop: '50px' }}>
                <PopupImage
                    imageSrc="https://s.ibaotu.com/next/img/new/person.b254.png"
                    popupSrc="https://js.ibaotu.com/revision/img/qyvip/20230519/img_qy_cela_first.png?v=20230529"
                    label1="企业"
                    label2="VIP"
                />
            </div>

            <PopupImage
                imageSrc="https://s.ibaotu.com/next/img/new/ep.4814.png"
                popupSrc="https://s.ibaotu.com/next/img/new/h2.bd5a.png"
                label1="个人"
                label2="VIP"
            />



            <div>
                <div className='div'>
                    <img src='https://js.ibaotu.com/revision/plus/img/public/icon_plus_logo3.png'></img>
                    <p>
                        企业
                    </p>
                    <p>站</p>
                </div>
            </div>

            <PopupImage
                imageSrc="https://s.ibaotu.com/next/img/new/components/aside-right/edit.49fa.gif"
                popupSrc="https://js.ibaotu.com/act/21/10/28/617a5435f1382.png"
                label1={<Link to="/home/OnlineDesign">在线</Link>} // 替换成你想要跳转的路径
                label2="设计"
            />

            <PopupImage
                imageSrc="https://s.ibaotu.com/img/activity/zq.png"
                popupSrc="https://js.ibaotu.com/revision/img/other/money/img_make_money.png"
                label1="赚钱"
            />


            {/*使用 onMouseEnter 和 onMouseLeave 事件来设置 isHovered 状态  当鼠标悬停在该 div 上时，isHovered 为 true，否则为 false */}
            <div
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
            >
                {/* 当 isHovered 为 true：会显示用户福利  */}
                {isHovered ? (
                    <div >
                        <p>用户</p>
                        <p>福利</p>
                    </div>
                ) : (
                    // 当 isHovered 为 false：会显示 icon图标
                    <div >
                        <i className='iconfont icon-liwu'></i>
                    </div>
                )}

            </div>

            <div
                onMouseEnter={() => setIsHovered1(true)}
                onMouseLeave={() => setIsHovered1(false)}
            >
                {isHovered1 ? (
                    <div style={{ position: 'relative' }}>
                        <Link to="/home/project">联系<br></br>客服</Link>

                        <div style={{ width: '200px', height: '200px', background: '#fff', position: 'absolute', top: '-55px', left: '-209px', color: 'black' }}>
                            <div style={{ display: 'flex', alignItems: 'center', padding: '10px' }}>
                                <div style={{ padding: '10px' }}>
                                    <i className='iconfont icon-kefu'></i>
                                </div>
                                <div>
                                    <p>企业客服</p>
                                    <p className='ke_text'>工作时间:9.30-18:30</p>
                                    <button style={{ borderRadius: '15px', border: 'none', background: 'yellow', padding: '5px', marginRight: '5px' }}>售前资询</button>
                                    <button style={{ borderRadius: '15px', border: 'none', background: 'yellow', padding: '5px' }}>售后服务</button>
                                </div>

                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', padding: '10px' }}>
                                <div style={{ padding: '10px' }}>
                                    <i className='iconfont icon-kefu'></i>
                                </div>
                                <div>
                                    <p>企业客服</p>
                                    <p className='ke_text'>工作时间:9.30-18:30</p>
                                    <p className='ke_text'>热线电话：021-31770313</p>
                                    <button style={{ borderRadius: '15px', border: 'none', background: 'orange', padding: '5px' }}>在线资询</button>
                                </div>

                            </div>
                        </div>
                    </div>
                ) : (
                    <div className="icon" >
                        <i className='iconfont icon-kefu'></i>
                        <p >客服</p>
                    </div>

                )}
            </div>

            <div
                onMouseEnter={() => setIsHovered2(true)}
                onMouseLeave={() => setIsHovered2(false)}
            >
                {isHovered2 ? (
                    <div className="text">
                        <p>意见</p>
                        <p>反馈</p>
                    </div>
                ) : (
                    <div className="icon">
                        <i className='iconfont icon-yijianfankui'></i>

                    </div>
                )}
            </div>

            {/* 回到顶部的效果 */}

            <div
                style={{ marginBottom: '50px' }}
                // 当鼠标停在这个 div 上时，调用 setIsHovered3(true)，将状态 isHovered3 设置为 true
                onMouseEnter={() => setIsHovered3(true)}
                // 当鼠标离开时 将 isHovered3 设置为 false
                onMouseLeave={() => setIsHovered3(false)}
                // 当用户点击这个 div 时，会调用之前定义的 scrollToTop 函数，平滑滚动到页面顶部。
                onClick={scrollToTop}
            >
                {/* 条件渲染：根据 isHovered3 的值来决定显示什么内容 */}
                {/* isHovered3 为 true 显示文本内容为回到顶部 */}
                {/* isHovered3 为 false 显示返回顶部的图标 */}
                {isHovered3 ? (
                    <div className="text">
                        <p>回到</p>
                        <p>顶部</p>
                    </div>
                ) : (
                    <div className="icon">
                        <i className='iconfont icon-fanhuidingbu'></i>
                    </div>
                )}
            </div>

        </div>
    )
}

export default Rightnav
